<template>
	<table class="form-field form-view"
	       :class="{'form-field-no-validate':!validate}">
		<tr v-for="(row,rowIndex) in fieldRows"
		    :key="rowIndex">
			<template v-for="field in row"
			          v-if="field && field.code">
				<th :width="labelWidth"
				    :key="'_'+field.code"
				    :colspan="fieldThSpan(field)">
					<label :class="{reuqire:field.reuqire}"
					       ref="th"
					       class="view-label"
					       :data-code="field.code">
						{{ field.name}}
					</label>
				</th>
				<td :key="field.code"
				    :colspan="fieldTdSpan(field)">
					<div v-if="!extRender[field.code] || !extRender[field.code].component"
					     v-html="renderData(formData[field.code],field.code,formData)"
					     ref="td"
					     class="view-item"
					     :data-code="field.code">
					</div>
					<component @trigger="fieldTrigger(field,$event)"
					           v-else-if="extRender[field.code].component"
					           :is="extRender[field.code].component"
					           :data="formData[field.code]"
					           :row="formData"
					           :option="extRender[field.code]"
					           :index="index"
					           :field="field"
					           :model="field"
					           ref="td"
					           class="view-item"
					           :data-code="field.code"></component>
				</td>
			</template>
		</tr>
	</table>
</template>
<script>
import BaseForm from './formTable';
import moduleStore from 'store/type/form';
import $ from '@/common';
import Field from 'field/type';
import Render from '@/common/render';

export default {
	mixins: [BaseForm],
	moduleStore,
	props: {
		index: {},
		validate: {
			default: false,
		},
		cellMaxWidth: {},
	},
	computed: {
		extRender() {
			return this.$parentGrid ? this.$parentGrid.extRender : {};
		},
		dataRender() {
			var dataRender = {};
			this.fieldList = $.propMap(this.formModel.fields, 'code');
			for (let i in this.formModel.fields) {
				let field = this.formModel.fields[i];
				if (Field[field.type] && Field[field.type].render) {
					dataRender[field.code] = Field[field.type].render(field);
				}
				if (field.tpl) {
					dataRender[field.code] = (code, row) => {
						return Render.tpl($.composeValue(field.tpl, row), field, row);
					};
				}
				if (field.type === 'money') {
					dataRender[field.code] = (value, row) => {
						if (value) {
							return toDecimal2(value);
						} else {
							return '';
						}
					};
				}
			}
			return dataRender;
		},
	},
	watch: {
		formData() {
			if (this.cellMaxWidth) {
				setTimeout(() => {
					var spanFields = { ...this.spanFields };
					var mark = false;
					if (this.$refs.td) {
						for (let i = 0; i < this.$refs.td.length; i++) {
							let td = this.$refs.td[i];
							if (td.offsetWidth > this.cellMaxWidth) {
								let code = td.getAttribute('data-code');
								if (!this.spanFields[code] || !this.spanFields[code].td) {
									spanFields[code] = spanFields[code] || {};
									mark = true;
									spanFields[code].td = true;
								}
							}
						}
					}
					if (this.$refs.th) {
						for (let i = 0; i < this.$refs.th.length; i++) {
							let th = this.$refs.th[i];
							if (th.offsetWidth > this.cellMaxWidth) {
								let code = th.getAttribute('data-code');
								if (!this.spanFields[code] || !this.spanFields[code].th) {
									mark = true;
									spanFields[code] = spanFields[code] || {};
									spanFields[code].th = true;
								}
							}
						}
					}
					//通过标记判断字段是否发生改变
					if (mark) {
						this.$set(this, 'spanFields', spanFields);
						this.$emit('redraw');
					}
				});
			}
		},
	},
	methods: {
		fieldTdSpan(field) {
			var col = field.type === 'memo' && this.hasFullRow ? this.formCol * 2 - 1 : 1;
			if (this.spanFields[field.code]) {
				col += this.formCol * 2 - 1;
			}
			return col;
		},
		fieldThSpan(field) {
			return 1;
		},
		renderData: function(value, code, row) {
			if (this.dataRender && this.dataRender[code]) {
				return this.dataRender[code](value, row);
			} else {
				return value;
			}
		},
	},
	created() {
		this.$parentPanel = $.getParent(this, 'actionPanel');
		if (this.$parentPanel) {
			this.$parentGrid = this.$parentPanel.$parent;
		}
		if (this.$parentGrid) {
			this.$options.components = this.$parentGrid.$options.components;
		}
	},
};
function toDecimal2(x) {
	var f = parseFloat(x);
	if (isNaN(f)) {
		return '';
	}
	f = Math.round(x * 100) / 100;
	var s = f.toString();
	var rs = s.indexOf('.');
	if (rs < 0) {
		rs = s.length;
		s += '.';
	}
	while (s.length <= rs + 2) {
		s += '0';
	}
	return s;
}
</script>

<style lang="less">
table.form-field.form-view {
	th,
	td {
		line-height: 1.2;
		text-align: left;
		.view-item {
			display: inline-block;
		}
	}
}
</style>
